<template>
  <el-dialog
    :title="title"
    width="50%"
    @close="closeViewImg"
    :visible.sync="viewImgShow">
    <el-carousel height="450px" :initial-index="initIndex">
      <el-carousel-item v-for="(item, index) in viewImgList" :key="index" class="carousel-item">
        <el-image
          style="height: 100%"
          fit="fill"
          :src="item.url"></el-image>
      </el-carousel-item>
    </el-carousel>
    <span slot="footer" class="dialog-footer">
      <el-button @click="viewImgShow = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props:{
    title:{
      type:String,
      default:'预览图片'
    }
  },
  data(){
    return {
      viewImgShow:false,
      viewImgList:[],
      initIndex:0,
    }
  },
  methods:{
    open(imgArr,index=0){
      this.viewImgList = imgArr;
      this.initIndex = index;
      this.viewImgShow = true;
    },
    closeViewImg(){
      this.viewImgList = [];
    }
  }
}
</script>
<style scoped lang="scss">
  .carousel-item{
    display:flex;
    align-items:center;
    justify-content: center;
  }
</style>
